'use client';
import Image from 'next/image';
import algoliasearch from 'algoliasearch/lite';
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import {
  InstantSearch,
  useHits,
  useRefinementList,
  useSearchBox,
} from 'react-instantsearch';
import Link from 'next/link';
import { Authors } from '../Authors';
import { Metadata } from '../Metadata';
import Coffee from '@/public/blog/coffee.webp';
import SearchIcon from '@/public/icons/search.svg';

const searchClient = algoliasearch(
  String(process.env.NEXT_PUBLIC_ALGOLIA_APP_ID),
  String(process.env.NEXT_PUBLIC_ALGOLIA_API_KEY),
);

function RefinementItem({
  item,
  refine,
}: {
  item: any;
  refine: (value: string) => void;
}) {
  const [selected, setSelected] = useState<'selected' | 'normal'>('normal');

  const borderColors = {
    selected: 'border-lightGray',
    normal: 'border-gray text-transparent',
  };
  const onClick = useCallback(() => {
    if (selected !== 'selected') {
      setSelected('selected');
    } else {
      setSelected('normal');
    }
    refine(item.value);
  }, [selected]);

  return (
    <button
      onClick={onClick}
      className={`border ${borderColors[selected]} whitespace-nowrap rounded-xl bg-gradient-white bg-clip-text px-4 py-3 text-[16px] leading-[20px] hover:border-lightGray`}
    >
      {item.label}
    </button>
  );
}

function RefinementList() {
  const { items, refine } = useRefinementList({ attribute: 'tags' });
  const sortedItems = useMemo(
    () => items.sort((a, b) => a.value.localeCompare(b.value, 'en')),
    [items],
  );
  useEffect(() => {
    if (items.length && typeof document !== 'undefined') {
      const serverSide = document.querySelector('.server-side-refinements');
      serverSide?.setAttribute('style', 'display:none');
    }
  }, [items.length]);
  return (
    <div className="flex min-h-[42px] w-screen flex-row items-center gap-6 overflow-y-scroll lg:max-w-[1000px]">
      {sortedItems.map((item) => (
        <RefinementItem key={item.label} item={item} refine={refine} />
      ))}
    </div>
  );
}

function Hit({ hit }: any) {
  console.log(hit.objectID, 'what is this?');
  const [, publishDate] = /.+(\d{4}-\d{2}-\d{2}).+/.exec(hit.objectID) ?? [];
  const cleaned = hit.objectID.replace(/\d{4}-\d{2}-\d{2}-/, '');
  const slug = cleaned.replace('.mdx', '');
  return (
    <div className="w-full md:w-1/2 lg:w-1/3">
      <div className="p-4">
        <Link href={`/blog/${slug}`}>
          <div className="mb-4 flex aspect-video w-full flex-shrink-0 items-center justify-center overflow-hidden rounded-xl bg-[#2D2D2D]">
            {hit?.image ? (
              <Image
                className="aspect-video w-full"
                priority
                alt={hit.image}
                width={416}
                height={242}
                src={`/blog/${hit.image}`}
              />
            ) : (
              <Image
                alt="coffee"
                className="aspect-video w-full"
                width={416}
                height={216}
                src={Coffee}
              />
            )}
          </div>
          <Metadata
            publishDate={publishDate}
            readLength={hit?.readLength}
            title={hit?.title}
            sizzle={hit?.sizzle}
          />
          <Authors authors={hit?.authors} />
        </Link>
      </div>
    </div>
  );
}

function SearchBox() {
  const { query, refine } = useSearchBox();
  const [inputValue, setInputValue] = useState(query);

  useEffect(() => {
    refine(inputValue);
  }, [inputValue]);

  return (
    <div className="relative z-10 -mt-16 flex w-full flex-1 flex-row gap-2 px-6 md:px-24 lg:px-8">
      <div className="flex w-full items-center gap-2 px-4 py-3">
        <Image
          alt="looking glass"
          src={SearchIcon}
          width={24}
          height={24}
          className="opacity-40"
          data-image-zoom-disabled
        />
        <input
          className="w-full border-none bg-transparent text-lg leading-10 placeholder:opacity-40 focus:outline-none"
          autoComplete="off"
          autoCorrect="off"
          autoCapitalize="off"
          placeholder="Search all articles"
          spellCheck={false}
          maxLength={512}
          type="search"
          value={inputValue}
          onChange={(event) => {
            setInputValue(event.currentTarget.value);
          }}
        />
      </div>
    </div>
  );
}

function Hits() {
  const { hits } = useHits();
  const { query } = useSearchBox();

  useEffect(() => {
    if (typeof document !== 'undefined') {
      const serverSide = document.querySelector('.server-side-hits');
      if (query) {
        serverSide?.setAttribute('style', 'display:none');
      } else {
        serverSide?.setAttribute('style', 'display:flex');
      }
    }
  }, [query]);

  if (!query) {
    return;
  }

  return (
    <div className="flex flex-row flex-wrap justify-start">
      {!hits.length && (
        <div className="text-4xl">No blogs match your criteria.</div>
      )}
      {hits.map((hit) => {
        return <Hit hit={hit} key={hit.objectID} />;
      })}
    </div>
  );
}

export default function Search() {
  if (!searchClient) {
    return null;
  }

  return (
    <div className="templateSearch flex w-full flex-col gap-[24px]">
      <InstantSearch searchClient={searchClient} indexName="blog">
        <SearchBox />
        <Hits />
      </InstantSearch>
    </div>
  );
}
